import React, { Component } from 'react'

import { connect } from "react-redux"
import action from '../../../store/action/index.js'

import cookies from "js-cookie";
import "./store_list.less";
import axios from "axios"

import Timer from "../../../components/timer.js"

import { withRouter } from 'react-router-dom'
const AMap = window.AMap;
class StoreList extends Component {
    state = {
        start: null,
        end: null,
        diffY: null,
        old: null,
        boxstate: false,
        spacing: null,//自身定位距离店铺
        listclickindex: 0,//高亮
    }
    render() {
        let { data_types, storeCommodity, data_purchases } = this.props
        let { listclickindex } = this.state
        return (
            <div className="store_list" ref={(listbox) => { this.listbox = listbox }}>
                <div className="store_list_top">
                    {/* 此思路为设置门店列表表头 */}
                    <span className="iconfont icon-fanhui2 store_list_top_span" onClick={() => {
                        // 跳路由
                        this.props.history.push(JSON.parse(sessionStorage.getItem("router")))
                        // console.log(this.props);
                    }} ></span>
                    <h2>
                        {
                            this.props.collection_store === "1" ? <i className="iconfont icon-shoucang2 store_list_top_collect1" onClick={() => {
                                // 取消收藏
                                this.changeStoreCollect()
                            }}>已收藏</i>
                                : <i className="iconfont icon-shoucang3 store_list_top_collect" onClick={() => {
                                    // 收藏
                                    this.changeStoreCollect()
                                }}>收藏</i>
                        }
                        {
                            this.props.storeMess.length > 0 ?
                                <span onClick={() => { this.lookStoreDtail() }}>{this.props.storeMess[0].store_mess}</span>
                                : null
                        }

                        <i className="iconfont icon-fanhui1"></i>
                    </h2>
                    <p>距离您{this.state.spacing}km</p>
                    <p>线上点餐时间：10：00 ~ 5:00</p>
                    <p>线下营业时间：8：30 ~ 20：30</p>
                </div>

                <div className="store_list_cont">
                    <div className="store_list_cont_left" ref={(listleftdom) => { this.listleftdom = listleftdom }}>
                        <div
                            className={`list_btm_left_every ${listclickindex === 0 ? 'list_btm_every_active' : null}`}
                            onClick={() => { this.clickListBtnEvery(0) }} key={0}>
                            热销
                        </div>
                        {
                            data_types.length > 0 ?
                                data_types.map((item, index) => {
                                    return <div
                                        className={`list_btm_left_every ${listclickindex === (index + 1) ? 'list_btm_every_active' : null}`}
                                        onClick={() => { this.clickListBtnEvery((index + 1)) }} key={item.type_id}>
                                        {item.type_typeMess}
                                    </div>
                                }) : null
                        }
                    </div>
                    <div className="store_list_cont_right" ref={(listrightdom) => { this.listrightdom = listrightdom }} onTouchMove={() => { this.clickListRight() }}>

                        {/* 列表 */}
                        <div>
                            <div className={`list_btm_right_every_box`}>
                                <h3>热销</h3>
                                {
                                    data_purchases.length > 0 ?
                                        data_purchases.map((item, index) => {
                                            return <div className="list_btm_right_every  animate__animated  animate__bounceInRight" key={item.commodity_namer}>
                                                <div className="list_btm_right_every_img">
                                                    <img src={item.commodity_images[0]} />
                                                </div>
                                                <div className="list_btm_right_every_cont">
                                                    <p className="list_btm_right_every_cont_name">{item.commodity_namer}</p>
                                                    <p className="list_btm_right_every_cont_mess">{item.commodity_mess}</p>
                                                    <p className="list_btm_right_every_cont_price">
                                                        <span className="list_btm_right_every_cont_pr"><i>{item.commodity_unitPrice[0]}元</i></span>
                                                        {
                                                            item.stock > 0 ?
                                                                <span className="list_btm_right_every_cont_spec" onClick={() => {
                                                                    this.listJumpDetail(item)
                                                                    sessionStorage.setItem("shop_id", JSON.stringify(item.commodity_id))
                                                                    sessionStorage.setItem("shop_img", JSON.stringify(item.commodity_images[1]))
                                                                }}>商品详情</span>
                                                                : <span className="list_btm_right_every_cont_pan iconfont icon-wodetaocan-zhuangtaiyishoukong" style={{ disabled: true }}></span>
                                                        }
                                                    </p>

                                                </div>
                                            </div>
                                        })
                                        : null
                                }
                            </div>


                            {
                                storeCommodity.length > 0 ?
                                    storeCommodity.map((item, index) => {
                                        return <div className={`list_btm_right_every_box`} key={index} >
                                            <h3>{item.shop_typeMess}</h3>
                                            {
                                                item.shop_type.map(shopitem => {
                                                    return <div className="list_btm_right_every  animate__animated  animate__bounceInRight" key={shopitem.commodity_id}>
                                                        <div className="list_btm_right_every_img">
                                                            <img src={shopitem.commodity_images[0]} />
                                                        </div>
                                                        <div className="list_btm_right_every_cont">
                                                            <p className="list_btm_right_every_cont_name">{shopitem.commodity_namer}</p>
                                                            <p className="list_btm_right_every_cont_mess">{shopitem.commodity_mess}</p>
                                                            <p className="list_btm_right_every_cont_price">
                                                                <span className="list_btm_right_every_cont_pr"><i>{shopitem.commodity_unitPrice[0]}元</i></span>
                                                                {
                                                                    shopitem.stock > 0 ?
                                                                        <span className="list_btm_right_every_cont_spec" onClick={() => {
                                                                            this.listJumpDetail(shopitem)
                                                                            sessionStorage.setItem("shop_id", JSON.stringify(shopitem.commodity_id))
                                                                            sessionStorage.setItem("shop_img", JSON.stringify(shopitem.commodity_images[1]))
                                                                        }}>商品详情</span>
                                                                        : <span className="list_btm_right_every_cont_pan iconfont icon-wodetaocan-zhuangtaiyishoukong" style={{ disabled: true }}></span>
                                                                }
                                                            </p>

                                                        </div>
                                                    </div>
                                                })
                                            }
                                        </div>
                                    }) : null
                            }
                        </div>
                    </div>
                </div>
            </div >
        )
    }

    // 收藏调接口
    changeStoreCollect = () => {
        this.props.changeStoreCollect({
            store_id: this.props.storeMess[0].store_id,
            user_id: cookies.get('user_id')
        })
    }

    // 查看店铺详情
    lookStoreDtail = () => {
        this.props.history.push('/store_detail')
    }

    componentDidMount() {
        // 加载获取店铺数据
        let { getStoreData } = this.props
        getStoreData({
            store: JSON.parse(sessionStorage.getItem("store_id")),
            user_id: cookies.get('user_id')
        })
        this.juli()
    }
    // 设置双楼层效果
    clickListBtnEvery = (index) => {
        this.listrightdom.removeEventListener("scroll", this.scrollTop)
        this.setState({ listclickindex: index })

        // 点击左侧导航获取点击位置和右侧内容到浏览器顶部距离 
        let topright = this.listrightdom.children[0].children[index].offsetTop

        // if(this.listrightdom.children[0]){

        // }
        this.listrightdom.scrollTo({
            top: topright,
            behavior: "smooth"
        })
    }

    // 右侧楼层效果
    clickListRight = () => {
        this.listrightdom.addEventListener("scroll", this.scrollTop)
    }
    scrollTop = () => {
        [...this.listrightdom.children[0].children].forEach((item, index) => {
            if (this.listrightdom.scrollTop + 60 > item.offsetTop) {
                this.setState({ listclickindex: index })
            }
        })
    }

    juli = () => {
        // let store_site = JSON.parse(localStorage.getItem("store_site")).split(",")
        let list_personal_locator = JSON.parse(localStorage.getItem("list_personal_locator"))
        // var dis = AMap.GeometryUtil.distance(store_site, list_personal_locator);
        // this.setState({ spacing: (dis / 1000).toFixed(2) })
    }

    listJumpDetail(item) {
        // 跳转到详情简介首页
        sessionStorage.setItem('store_router', JSON.stringify(this.props.history.location.pathname))
        this.props.history.push('/itemdetail')
        axios({
            url: "/api/front_end/addHistory",
            method: "post",
            data: {
                commodity_id: item.commodity_id,
                timer: Timer(),
                user_id: cookies.get('user_id')
            }
        }).then(res => {
            // console.log(res);
        })
    }

}

export default connect(state => state.foodf, action.foodf)(withRouter(StoreList))
